import React, { Component } from "react";
import { Icon, BackTop } from "antd";
import "./Articles.less";

import { formatDate, formatContentFontFamily, formatImgUrl } from "@/utils/formatMonTextStyle.js";


class Articles extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    const { contentData } = this.props.detailsContent;
    const goPage=(url)=>{
      window.open(url)
    }
    console.log(contentData)

    return (
      <div className="article-mon" style={{ padding: 20 }}>
        <BackTop />
        {contentData && contentData.title ? (
          <div style={{ height: "100%" }}>
            <div className="article-mon-header">

              {/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! cannot read properties of null (reading 'scan_count') !!!!!!!!!!!!!!!!!!!!!!! */}

              {/* <div className="icons">
                <span>
                  <Icon type="eye" />
                  &nbsp;
                  {contentData.scan_count ? contentData.scan_count : 0}
                </span>

                <span>
                  <Icon type="like" />
                  &nbsp;
                  {contentData.like_count ? contentData.like_count : 0}
                </span>

                <span>
                  <Icon type="edit" />
                  &nbsp;
                  {contentData.comment_count ? contentData.comment_count : 0}
                </span>

                <span>
                  <Icon type="clock-circle" />
                  &nbsp;
                  {contentData.create_time ? contentData.create_time : ""}
                </span>

                <span>
                  <a onClick={()=>goPage(contentData.h5_url)}>原文链接</a>
                </span>
              </div> */}
            </div>

            <div style={{ width: "100%", height: "100%"}}>
            {/* 2023-10-01 之前发布的文章使用 蒙文字体1， 之后的使用蒙文字体2 */}
            {formatDate(contentData.create_time) > 1696089600000 ?
              <div style={{ width: "100%", height: "100%", display: "flex", justifyContent: "flex-start" }}>
                <div className="mon_text1" style={{ writingMode: "vertical-lr", float: "left", fontWeight: "bold", fontSize: "30px" }}>
                  {contentData.title ? contentData.title : ""}
                </div>

                <div
                  className='content-container mon_text1'
                  style={{ writingMode: "vertical-lr", overflow: "auto", float: "left" }} 
                  // dangerouslySetInnerHTML={{ __html: this.props.detailsContent.contentData.content }}
                  dangerouslySetInnerHTML={{ __html: formatContentFontFamily(this.props.detailsContent.contentData.content) }}
                >
                </div>

                <div style={{ overflowY: "scroll", float: "left" }} >
                  {contentData.img_arr && contentData.img_arr.map((item, i) => {
                    return <img key={i} src={formatImgUrl(item.url)} alt={item.intro} style={{ width: "100%", aspectRatio: "4/3", marginBottom: 20 }} />
                  })}

                  {contentData.url && (
                    <div style={{ width: 800, height: 600 }}>
                      <video id="example_video_1" class="video-js vjs-default-skin" style={{ width: "100%", height: "100%" }} controls preload="none" poster="http://vjs.zencdn.net/v/oceans.png">
                        <source src={contentData.url} type="video/mp4" />
                      </video>
                    </div>
                  )}
                </div>
              </div>
            :
              <div style={{ width: "100%", display: "flex", justifyContent: "flex-start" }}>
                <div className="mon_text2" style={{ writingMode: "vertical-lr", float: "left", fontWeight: "bold", fontSize: "30px" }}>
                  {contentData.title ? contentData.title : ""}
                </div>

                <div
                  className='content-container mon_text2'
                  style={{ writingMode: "vertical-lr", overflow: "auto", float: "left" }} 
                  // dangerouslySetInnerHTML={{ __html: this.props.detailsContent.contentData.content }}
                  dangerouslySetInnerHTML={{ __html: formatContentFontFamily(this.props.detailsContent.contentData.content) }}
                >
                </div>

                <div style={{ overflowY: "scroll", float: "left" }} >
                  {contentData.img_arr && contentData.img_arr.map((item, i) => {
                    return <img key={i} src={formatImgUrl(item.url)} alt={item.intro} style={{ width: "100%", aspectRatio: "4/3", marginBottom: 20 }} />
                  })}

                  {contentData.url && (
                    <div style={{ width: 800, height: 600 }}>
                      <video id="example_video_1" class="video-js vjs-default-skin" style={{ width: "100%", height: "100%" }} controls preload="none" poster="http://vjs.zencdn.net/v/oceans.png">
                        <source src={contentData.url} type="video/mp4" />
                      </video>
                    </div>
                  )}
                </div>
              </div>
            }
            </div>
          </div>
        ) : (
          <h1>暂无数据</h1>
        )}
      </div>
    );
  }
}

export default Articles;
